iT邦幫忙

2021 iThome 鐵人賽

DAY 7
0
自我挑戰組

JavaScript 奇奇怪怪的核心觀念系列 第 7

(Day7) 隱含轉型 - 偷偷轉換的 Strings 與 Numbers 類型

  • 分享至 

  • xImage
  •  

前言

昨天介紹了 JS 中強制轉型,顯性轉型的部分,今天就要介紹最坑人的隱含轉型

這邊同樣將隱含轉型做個大方向的分類:

  • 隱含轉型 : Strings <–> Numbers
  • 隱含轉型 : 轉成 Boolean
  • 邏輯算子 || 與 &&
  • 寬鬆相等(Loose Equals) vs 嚴格相等(Strict Equals)
    今天則會先介紹 隱含轉型 : Strings <–> Numbers 的部分,剩餘的隱含轉型則會再下一篇介紹。

隱含轉型 : Strings <–> Numbers

上篇顯性轉型文章中,有刻意將 Strings <–> Numbers 拆成轉成字串、轉成數字,不過在隱含轉型中由於 + 號算數運算子狀況過於特別,所以這次還是一起講了。

狀況一 + 算數運算子

我們都知道,使用 + 運算子,相加兩個數字時,呈現結果會是兩個數字總和,若用 + 將兩組字串相加,則會讓字串內容連起來,但如果兩個運算元的型別不一致呢?

這種狀況 JS 會根據 運算元中是否有字串、數字類型時,將另為一個運算元自動轉型,關於這部分則有幾個規則:

  • 當雙方有一方是字串,兩者都會轉字串(優先度最高
    • [] 碰上 + 號,陣列中的值會一併轉成字串,並帶上陣列中的逗號,若是空陣列則轉成空字串。
    • {} 放在運算元第一位,碰上 + 號,{} 會直接被當成空區塊而無作用,若 {} 放在運算元第二位或是後方時,會被轉成 "[object Object]" 的字串,且上述規則不論物件是否有值都會成立。
  • 當雙方有數字,兩者會轉數字(次等

接著就用程式碼來看看上面規則是否正確:

'test' + 1 //"test1" 
  • 'test' 是字串,數字 1 被轉成字串,字串相加。
123 + [] // "123" 
  • [] 會轉成空字串,因此數字 123 也轉成字串,結果就是字串 "123"
['1','2','3'] + 456 //"1,2,3456" 
  • 陣列中的值會轉成字串,數字 456 因此被轉成字串,字串相加,要注意的是陣列轉成字串後 , 會被保留。
{} + '123' //123 
  • {} 在前沒有作用,會變成 + 號會變成正負運算子,因為正負運算子字串 '123' 會被轉成數字。
666 + {obj:'test'} //"666[object Object]"
  • {obj:'test'} 在後面 會被轉型成 "[object Object]" 的字串,因此數字 666 也轉成字串 "666" 做字串相加。
true + 10 //11
  • true 轉成數字 1 ,與數字 10 相加。

以上大致就是各種型別碰上 + 算數運算子隱含轉後的狀況。

狀況二 使用算數運算子將字串轉為數字

除了 + 算數運算子,的狀況比較特別,其他算數運算子,都會將字串轉換成數字,範例如下

var test = '2'
test + 1  //"21"
test - 1  // 1
test * 1  //2
test / 1 //2

但如果字串不是數字內容的字串,使用 + 以外的算數運算子時都會回傳 NaN ,例如:

var test = 'test'
test - 1  // NaN
test * 1  // NaN
test / 1 // NaN

參考資料


上一篇
(Day6) 強制轉型&顯性轉型
下一篇
(Day8) 隱含轉型 - 轉成 Boolean & 寬鬆相等 vs 嚴格相等
系列文
JavaScript 奇奇怪怪的核心觀念30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言